﻿<script setup lang="ts" name="EpCalendar">
import calendar from '@/plugins/calendar'
import { isToday } from '@/utils/is'
import { formatToDate } from '@/utils/dateFormat'
import { dayjs } from 'element-plus'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const systemConfigStore = useSystemConfigStore()
const { systemConfig, language } = storeToRefs(systemConfigStore)

const selectedDate = ref(new Date())
const currentMonth = ref(new Date())
const currentWeekRange: any = ref([])
const isMonth = ref(true)
const dateTypeChange = (v) => {
  if (v) {
    currentMonth.value = selectedDate.value = new Date()
  } else {
    selectedDate.value = new Date()
    console.log(dayjs(dayjs(new Date()).add(0, 'week').startOf('week')).format('YYYY-MM-DD'), '开始时间')
    console.log(dayjs(dayjs(new Date()).add(0, 'week').endOf('week')).format('YYYY-MM-DD'), '结束时间')
    currentWeekRange.value = [new Date(dayjs(dayjs(new Date()).add(0, 'week').startOf('week')).format('YYYY-MM-DD')), new Date(dayjs(dayjs(new Date()).add(0, 'week').endOf('week')).format('YYYY-MM-DD'))]
  }
}
watch(
  () => language.value,
  (v) => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    dayjs.en.weekStart = v === 'en' ? 0 : 1
    // if (v === 'en') {
    //   dayjs.locale('en')
    // } else if (v === 'zh') {
    //   dayjs.locale('zh-cn')
    // } else {
    //   dayjs.locale('zh-tw')
    // }
    dateTypeChange(isMonth.value)
  },
  {
    immediate: true
  }
)
type lunarDataType = {
  Animal: string;
  IDayCn: string;
  IMonthCn: string;
  Term: null | string;
  cAstro: string;
  astro: string;
  cDay: number;
  cMonth: number;
  cYear: number;
  date: string;
  festival: null | string;
  gzDay: string;
  gzMonth: string;
  gzYear: string;
  isLeap: boolean;
  isTerm: boolean;
  isToday: boolean;
  lDay: number;
  lMonth: number;
  lYear: number;
  lunarDate: string;
  lunarFestival: null | string;
  nWeek: number;
  ncWeek: string;
}
// 日历添加农历内容
const calendarData = (data) => {
  const year = parseInt(data.day.split('-')[0])
  const month = parseInt(data.day.split('-')[1])
  const day = parseInt(data.day.split('-')[2])
  return calendar.solar2lunar(year, month, day) as lunarDataType
}
// 日历标题添加农历内容
const calendarTitleData = (data) => {
  const dateStr = dayjs(data).format('YYYY-MM-DD')
  const year = parseInt(dateStr.split('-')[0])
  const month = parseInt(dateStr.split('-')[1])
  const day = parseInt(dateStr.split('-')[2])
  return calendar.solar2lunar(year, month, day) as lunarDataType
}
// 月选择改变触发事件
const monthChangeHandler = () => {
  selectedDate.value = currentMonth.value
}
// 周历日期改变触发事件
const dateChangeHandler = () => {
  currentWeekRange.value = [new Date(dayjs(dayjs(new Date(selectedDate.value)).add(0, 'week').startOf('week')).format('YYYY-MM-DD')), new Date(dayjs(dayjs(new Date(selectedDate.value)).add(0, 'week').endOf('week')).format('YYYY-MM-DD'))]
}
// 返回今天点击事件
const backToday = () => {
  if (isMonth.value) {
    currentMonth.value = selectedDate.value = new Date()
  } else {
    selectedDate.value = new Date()
    currentWeekRange.value = [new Date(dayjs(dayjs(new Date()).add(0, 'week').startOf('week')).format('YYYY-MM-DD')), new Date(dayjs(dayjs(new Date()).add(0, 'week').endOf('week')).format('YYYY-MM-DD'))]
  }
}
// 日历点击事件
const calendarClickHandler = (data) => {
  if (isMonth.value) {
    currentMonth.value = selectedDate.value = new Date()
  } else {
    selectedDate.value = data.date
  }
}
// 上一年
const prevYear = () => {
  currentMonth.value = selectedDate.value = new Date(dayjs(dayjs(new Date(selectedDate.value)).startOf('month').subtract(1, 'year')).format('YYYY-MM-DD'))
}
// 上一月
const prevMonth = () => {
  currentMonth.value = selectedDate.value = new Date(dayjs(dayjs(new Date(selectedDate.value)).startOf('month').subtract(1, 'month')).format('YYYY-MM-DD'))
}
// 上一周
const prevWeek = () => {
  selectedDate.value = new Date(dayjs(dayjs(new Date(selectedDate.value)).startOf('week').subtract(1, 'week')).format('YYYY-MM-DD'))
  currentWeekRange.value = [new Date(dayjs(dayjs(new Date(selectedDate.value)).add(0, 'week').startOf('week')).format('YYYY-MM-DD')), new Date(dayjs(dayjs(new Date(selectedDate.value)).add(0, 'week').endOf('week')).format('YYYY-MM-DD'))]
}
// 下一周
const nextWeek = () => {
  selectedDate.value = new Date(dayjs(dayjs(new Date(selectedDate.value)).startOf('week').add(1, 'week')).format('YYYY-MM-DD'))
  currentWeekRange.value = [new Date(dayjs(dayjs(new Date(selectedDate.value)).add(0, 'week').startOf('week')).format('YYYY-MM-DD')), new Date(dayjs(dayjs(new Date(selectedDate.value)).add(0, 'week').endOf('week')).format('YYYY-MM-DD'))]
}
// 下一月
const nextMonth = () => {
  currentMonth.value = selectedDate.value = new Date(dayjs(dayjs(new Date(selectedDate.value)).startOf('month').add(1, 'month')).format('YYYY-MM-DD'))
}
// 下一年
const nextYear = () => {
  currentMonth.value = selectedDate.value = new Date(dayjs(dayjs(new Date(selectedDate.value)).startOf('month').add(1, 'year')).format('YYYY-MM-DD'))
}
</script>
<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="no-border no-radius">
      <el-alert title="日历页面主要使用日历组件，扩展农历、闰月、星座、生肖、天干地支对照日期、公农历节日、二十四节气、周末展示功能，中英文日历格式切换功能" type="success" :closable="false" show-icon />
      <el-calendar v-model="selectedDate" :range="!isMonth && currentWeekRange.length === 2 ? currentWeekRange : null" :key="language">
        <template #header="{ date }">
          <span>
            {{ date }}
            <span v-if="language === 'zh' || language === 'zh_tw'">
              {{ calendarTitleData(selectedDate).gzYear }}
              {{ calendarTitleData(selectedDate).Animal }}{{ $t('calendar.年') }} {{ calendarTitleData(selectedDate).gzMonth }}{{ $t('calendar.月') }}
            </span>
          </span>
          <el-form :inline="true">
            <el-form-item>
              <el-radio-group v-model="isMonth" @change="dateTypeChange">
                <el-radio :label="true" border>{{ $t('calendar.月历') }}</el-radio>
                <el-radio :label="false" border>{{ $t('calendar.周历') }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button v-if="isMonth" @click="prevYear">{{ $t('calendar.上一年') }}</el-button>
              <el-button v-if="isMonth" @click="prevMonth">{{ $t('calendar.上一月') }}</el-button>
              <el-button v-if="!isMonth" @click="prevWeek">{{ $t('calendar.上一周') }}</el-button>
              <el-date-picker v-if="isMonth" @change="monthChangeHandler" :default-value="new Date()" :clearable="false" :editable="false" v-model="currentMonth" type="month" />
              <el-date-picker v-if="!isMonth" @change="dateChangeHandler" :default-value="new Date()" :clearable="false" :editable="false" v-model="selectedDate" type="date" style="width: 120px;" />
              <el-button v-if="!isMonth" @click="nextWeek">{{ $t('calendar.下一周') }}</el-button>
              <el-button v-if="isMonth" @click="nextMonth">{{ $t('calendar.下一月') }}</el-button>
              <el-button v-if="isMonth" @click="nextYear">{{ $t('calendar.下一年') }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="backToday" :disabled="isToday(formatToDate(dayjs(new Date(selectedDate))))">
                {{
                  $t('calendar.返回今天') }}
              </el-button>
            </el-form-item>
          </el-form>
        </template>
        <template #date-cell="{ data }">
          <div :class="['item-calendar', data.isSelected ? 'is-selected' : '', calendarData(data).nWeek === 6 || calendarData(data).nWeek === 7 ? 'is-weekend' : '']" @click="calendarClickHandler(data)">
            <p>
              <strong>
                {{ calendarData(data).cDay }}
                <i v-if="calendarData(data).nWeek === 6 || calendarData(data).nWeek === 7">
                  {{ $t('text.textVacation')
                  }}
                </i>
              </strong>
              <span v-if="language === 'zh' || language === 'zh_tw'" :class="calendarData(data).Term ? 'is-primary' : ''">
                {{ calendarData(data).Term
                  ? calendarData(data).Term : calendarData(data).gzDay }}
              </span>
            </p>
            <p>
              <strong v-if="language === 'zh' || language === 'zh_tw'" :class="[calendarData(data).lunarFestival ? 'is-success' : '', calendarData(data).festival ? 'is-warning' : '']">
                <i v-if="calendarData(data).isLeap">{{ calendarData(data).IMonthCn }}</i>
                {{ calendarData(data).lunarFestival ? calendarData(data).lunarFestival : calendarData(data).festival ?
                  calendarData(data).festival : calendarData(data).IDayCn }}
              </strong>
              <span>{{ language === 'zh' || language === 'zh_tw' ? calendarData(data).cAstro : calendarData(data).astro }}</span>
            </p>
          </div>
        </template>
      </el-calendar>
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-form {
  .el-form-item {

    .el-button,
    .el-input {
      margin: 0 0 0 -1px;
      border-radius: 0;

      &:hover {
        z-index: 1;
      }
    }

    .el-button {
      &:first-child {
        border-top-left-radius: var(--el-border-radius-base);
        border-bottom-left-radius: var(--el-border-radius-base);
      }

      &:last-child {
        border-top-right-radius: var(--el-border-radius-base);
        border-bottom-right-radius: var(--el-border-radius-base);
      }
    }

    :deep(.el-form-item__content) {
      >.el-input {
        margin: 0 0 0 -1px;
        border-radius: 0;

        .el-input__inner {
          border-radius: 0;
        }
      }
    }
  }

  .el-form-item+.el-form-item {
    margin-left: 12px;

    .el-button {
      border-radius: var(--el-border-radius-base);
    }
  }
}

.el-calendar {
  :deep(.el-calendar__header) {
    align-items: center;
    margin: 0 20px;
    padding: 12px 0;

    >span {
      align-items: center;
    }

    .el-form {
      &.el-form--inline {
        .el-input {
          width: 100px;
        }
      }
    }
  }

  :deep(.el-calendar__body) {
    padding: 0 20px 20px;
  }

  :deep(.el-calendar-table) {
    .el-calendar-day {
      display: flex;
    }
  }
}

.prev,
.next {
  .item-calendar {
    &.is-weekend {
      color: var(--el-text-color-placeholder);
    }
  }
}

.item-calendar {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin: -8px;
  padding: 8px;

  &.is-weekend {
    color: var(--el-color-success);
  }

  p {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    margin: 0;

    strong {
      i {
        margin-left: 5px;
        font-weight: normal;
        font-style: normal;
      }
    }

    span {
      font-size: var(--el-font-size-extra-small);

      &.is-primary {
        color: var(--el-color-primary);
      }
    }
  }

  p+p {
    strong {
      font-size: var(--el-font-size-extra-small);

      i {
        margin-right: 5px;
        margin-left: 0;
        font-style: normal;
      }

      &.is-warning {
        color: var(--el-color-warning);
      }

      &.is-success {
        color: var(--el-color-success);
      }
    }
  }
}
</style>
